<template>
  <div>
    <div class="table-operator">
      <a-button v-action:add type="primary" @click="$refs.shiftForm.add()">新建模板</a-button>
    </div>
    <a-spin :spinning="loading">
      <div class="config-wrapper" v-for="item in configList" :key="item.id">
        <div class="table-operator--inner">
          <div class="left">
            <a-checkbox
              v-action:edit
              :checked="item.enable"
              @change="
                e => {
                  onDefaultChange(e, item.id);
                }
              "
            />
            <span class="name" style="font-size: 16px;">{{ item.name }}</span>
          </div>
          <div class="right">
            <a-button v-action:edit icon="edit" type="link" @click="$refs.shiftForm.edit(item)"></a-button>
            <a-button
              class="link-danger"
              v-action:delete
              icon="delete"
              type="link"
              @click="onDelete(item.id)"
            ></a-button>
          </div>
        </div>
        <a-table a-table rowKey="id" :columns="columns" :dataSource="item.data" :pagination="false">
          <span slot="mon" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
          <span slot="tue" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
          <span slot="wed" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
          <span slot="thu" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
          <span slot="fri" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
          <span slot="sat" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
          <span slot="sun" slot-scope="text">
            {{ !!text ? text.shiftsName || '休息' : '休息' }}
          </span>
        </a-table>
      </div>
    </a-spin>

    <shift-temp-form ref="shiftForm" @ok="handleSubmit" />
  </div>
</template>

<script>
import { layoutMixin } from '@/utils/mixin';
import ShiftTempForm from './ShiftTempForm';
import { getUserShiftConfig, deleteUserShiftConfig, setUserShiftConfigDefault } from '@/api/shift';
export default {
  name: 'ShiftTempSetting',
  mixins: [layoutMixin],
  components: {
    ShiftTempForm
  },
  data() {
    return {
      loading: false,
      configList: []
    };
  },
  computed: {
    columns() {
      return [
        {
          title: '周一',
          dataIndex: 'mon',
          scopedSlots: { customRender: 'mon' }
        },
        {
          title: '周二',
          dataIndex: 'tue',
          scopedSlots: { customRender: 'tue' }
        },
        {
          title: '周三',
          dataIndex: 'wed',
          scopedSlots: { customRender: 'wed' }
        },
        {
          title: '周四',
          dataIndex: 'thu',
          scopedSlots: { customRender: 'thu' }
        },
        {
          title: '周五',
          dataIndex: 'fri',
          scopedSlots: { customRender: 'fri' }
        },
        {
          title: '周六',
          dataIndex: 'sat',
          scopedSlots: { customRender: 'sat' }
        },
        {
          title: '周日',
          dataIndex: 'sun',
          scopedSlots: { customRender: 'sun' }
        }
      ];
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      getUserShiftConfig()
        .then(res => {
          this.configList = res.data.map(ele => {
            ele.data = this.parseTableData(ele.data);
            return ele;
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },

    parseTableData(data) {
      let item = {};
      for (let ele of data) {
        item[ele.date] = {
          id: ele.id,
          shiftsId: ele.shiftsId,
          shiftsName: ele.shiftsName
        };
      }
      item.id = 1;
      return [item];
    },

    onDefaultChange(e, id) {
      const val = e.target.checked;
      setUserShiftConfigDefault({ id, enable: val })
        .then(res => {
          this.$message.success(res.message);
          this.init();
        })
        .finally(() => {});
    },

    onDelete(id) {
      this.$confirm({
        title: '提示',
        content: '确认要删除工作时间配置吗？',
        onOk: () => {
          deleteUserShiftConfig({ id }).then(res => {
            this.$message.success(res.message);
            this.init();
          });
        }
      });
    },

    handleSubmit() {
      this.init();
    }
  }
};
</script>

<style lang="less" scoped>
.config-wrapper {
  margin-bottom: 16px;
  .table-operator--inner {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    .name {
      margin: 0 0 0 8px;
    }
  }
}
</style>
